<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
        <link rel="shortcut icon" type="image/png" href="../img/favicon.png">
        <title></title>

        

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel="stylesheet" href="../css/main.css">
        <link rel="stylesheet" href="../css/jsplumb-doc.css">

    </head>
    <body>
        <div class="navbar navbar-top navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="/"><img src="../../img/logo-medium-jsplumb.png"></a>
            <div class="community"></div>

        </div>

        <div class="navbar-collapse collapse nav-wrapper">
            <ul class="nav navbar-nav">
                <li><a href="../">DEMOS</a></li>
                <li><a href="../doc/home.html">DOCS</a></li>
                <li><a href="../apidocs/index.html">API</a></li>
                <li><a href="../download">DOWNLOAD</a></li>
                <li><a href="http://beta.jsplumbtoolkit.com/contact.html">CONTACT</a></li>
                <li><a href="https://blog.jsplumbtoolkit.com">BLOG</a></li>

            </ul>

            <div class="social-nav hidden-xs">
                <a href="http://twitter.com/jsplumblib" class="link"><span class="icon-twitter"></span></a>
                <a href="http://github.com/sporritt/jsplumb/" class="link"><span class="icon-github"></span></a>
                <a href="http://www.linkedin.com/company/jsplumb" class="link"><span class="icon-linkedin"></span></a>

            </div>
        </div><!--/.nav-collapse -->
    </div>
</div>

        <div class="container padding-top">
            <div class="row" id="docs">
                <div class="docs-nav col-xs-3" tabindex="0">
                    <ul>
<li><a href="changelog.html">Changelog</a></li>
<li>Required imports and basic setup<ul>
<li><a href="home.html#browser">Browser Compatibility</a></li>
<li><a href="home.html#setup">Setup</a></li>
<li><a href="home.html#doctype">Doctype</a></li>
<li><a href="home.html#imports">Required Imports</a></li>
<li><a href="home.html#initializing">Initializing jsPlumb</a></li>
<li><a href="home.html#multiple">Multiple jsPlumb Instances</a></li>
<li><a href="home.html#zindex">Z-Index Considerations</a></li>
<li><a href="home.html#container">Where does jsPlumb add elements?</a></li>
<li><a href="home.html#dragging">Element Dragging</a></li>
<li><a href="home.html#performance">Performance</a></li>
<li><a href="zooming.html">Zooming</a></li>
</ul>
</li>
<li><a href="defaults.html">Configuring Defaults</a></li>
<li><a href="basic-concepts.html">Basic Concepts</a><ul>
<li><a href="anchors.html">Anchors</a></li>
<li><a href="connectors.html">Connectors</a></li>
<li><a href="endpoints.html">Endpoints</a></li>
<li><a href="overlays.html">Overlays</a></li>
</ul>
</li>
<li><a href="connections.html">Establishing Connections</a><ul>
<li><a href="connections.html#programmatic">Programmatic Connections</a></li>
<li><a href="connections.html#common">Reusing Common Settings</a></li>
<li><a href="connections.html#detaching">Detaching Programmatic Connections</a></li>
<li><a href="connections.html#draganddrop">Drag and Drop Connections</a></li>
<li><a href="connections.html#sourcesandtargets">Elements as sources &amp; targets</a></li>
<li><a href="connections.html#maketarget">Element Targets</a></li>
<li><a href="connections.html#makesource">Element Sources</a></li>
<li><a href="connections.html#sourcefilter">Specifying drag source area</a></li>
</ul>
</li>
<li><a href="removing.html">Removing Connections/Endpoints</a></li>
<li><a href="parameters.html">Connection &amp; Endpoint Parameters</a></li>
<li><a href="types.html">Connection &amp; Endpoint Types</a></li>
<li><a href="events.html">Events</a><ul>
<li><a href="interceptors.html">Interceptors</a></li>
</ul>
</li>
<li>Appearance<ul>
<li><a href="paint-styles.html">Styling via Paint Styles</a></li>
<li><a href="styling-via-css.html">Styling via CSS</a></li>
</ul>
</li>
<li><a href="querying.html">Querying jsPlumb</a></li>
<li><a href="animation.html">Animation</a></li>
<li><a href="utilities.html">Utility Functions</a></li>
<li><a href="loader-support.html">Loader Support (RequireJS)</a></li>
<li>Examples<ul>
<li><a href="connect-examples.html">jsPlumb.connect</a></li>
<li><a href="draggable-connections-examples.html">Draggable Connections</a></li>
<li><a href="miscellaneous-examples.html">Miscellaneous</a></li>
</ul>
</li>
<li>Development<ul>
<li><a href="development.html">Which files are which?</a></li>
<li><a href="Build.html">Building jsPlumb</a></li>
<li><a href="development-documentation.html">Documentation while developing</a></li>
</ul>
</li>
</ul>
                </div>
                <div class="markdown-body col-xs-9">
                    <h3>jsPlumb.connect Examples</h3>

<p>This section provides various examples of how to use the programmatic API to establish Connections. </p>

<p>The basic syntax of a call is that you execute &#39;connect&#39;, providing a source and a target, and optionally a paintStyle and preferences for where you want the plumbing to be anchored on each element, as well as the type of connector to use. </p>

<ul>
<li><p>Connect window1 to window2 with the default settings:
<pre>
jsPlumb.connect({source:&quot;window1&quot;, target:&quot;window2&quot;});
</pre></p></li>
<li><p>Connect window1 to window2 with a 15 pixel wide yellow Connector, and a slightly brighter endpoint (remember the default Endpoint is a Dot):
<pre>
jsPlumb.connect({
  source:&#39;window1&#39;,
  target:&#39;window2&#39;,
  paintStyle:{strokeWidth:15,stroke:&#39;rgb(243,230,18)&#39;},
  endpointStyle:{fill:&#39;rgb(243,229,0)&#39;}
});
</pre></p></li>
<li><p>Connect window1 to window2 with a 15 pixel wide yellow Connector, and a slightly brighter endpoint:
<pre>
jsPlumb.connect({
  source:&#39;window1&#39;,
  target:&#39;window2&#39;,
  paintStyle:{strokeWidth:15,stroke:&#39;rgb(243,230,18)&#39;},
  endpointStyle:{fill:&#39;rgb(243,229,0)&#39;}
});
</pre></p></li>
<li><p>Connect window3 to &#39;window4&#39; with a 10 pixel wide, semi opaque blue Connector, anchored to the left middle of window3, and the right middle of window4, with a Rectangle endpoint of width 10 and height 8:
<pre>
jsPlumb.connect({
  source:&#39;window3&#39;,
  target:&#39;window4&#39;,
  paintStyle:{ strokeWidth:10, stroke:&#39;rgba(0, 0, 200, 0.5)&#39; },
  anchors:[&quot;Right&quot;, &quot;Left&quot;],
  endpoint:[ &quot;Rectangle&quot;, { width:10, height:8 } ]
});
</pre></p></li>
<li><p>Connect window2 to window3 with a default Connector from the top center of window2 to the bottom center of window3, and rectangular endpoints:
<pre>
jsPlumb.connect({
  source:&#39;window2&#39;,
  target:&#39;window3&#39;,
  paintStyle:{strokeWidth:8, stroke:&#39;rgb(189,11,11    )&#39;},
  anchors:[&quot;Bottom&quot;, &quot;Top&quot;],
  endpoint:&quot;Rectangle&quot;
});
</pre></p></li>
<li><p>Connect window1 to window2 with a 15 px wide yellow Bezier. Endpoints are a slightly lighter shade of yellow.
<pre>
jsPlumb.connect({
  source:&#39;window1&#39;,
  target:&#39;window2&#39;,
  anchors:[&quot;Bottom&quot;, [0.75,0,0,-1]],
  paintStyle:{strokeWidth:15,stroke:&#39;rgb(243,230,18)&#39;},
  endpointStyle:{fill:&#39;rgb(243,229,0)&#39;}
});
</pre></p></li>
<li><p>Connect window3 to window4 with a 10px wide blue-ish half transparent Bezier. Put Endpoints underneath the element they attach to.  The Endpoints have a radial gradient. Both ways of specifying gradient positioning are shown here.</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">var w34Stroke = &#39;rgba(50, 50, 200, 1)&#39;;
var w34HlStroke = &#39;rgba(180, 180, 200, 1)&#39;;
jsPlumb.connect( {
  source:&#39;window3&#39;,
  target:&#39;window4&#39;,
  paintStyle:{strokeWidth:10, stroke:w34Stroke},
  anchors:[&quot;RightMiddle&quot;, &quot;LeftMiddle&quot;],
  endpointStyle:{ gradient : {stops:[[ 0, w34Stroke ], [ 1, w34HlStroke ]], offset:17.5, innerRadius:15 }, radius:35},
  //endpointStyle:{ gradient : {stops:[[0, w34Stroke], [1, w34HlStroke]], offset:&#39;78%&#39;, innerRadius:&#39;73%&#39;}, radius:35 }
});
</code></pre></div></li>
<li><p>Connect window2 to window3 with an 8px red Bezier and default rectangular endpoints.  See also how the first Anchor is specified here - this is how you create Anchors in locations jsPlumb does not offer shortcuts for.  The Endpoints in this example have linear gradients applied.</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">var w23Stroke = &#39;rgb(189,11,11)&#39;;
jsPlumb.connect({
    source:&#39;window2&#39;,
    target:&#39;window3&#39;,
    paintStyle:{strokeWidth:8,stroke:w23Stroke},
    anchors:[[0.3,1,0,1], &quot;Top&quot;],
    endpoint:&quot;Rectangle&quot;,
    endpointStyles:[{ gradient : {stops:[[0, w23Stroke], [1, &#39;#558822&#39;]] }},
            { gradient : {stops:[[0, w23Stroke], [1, &#39;#882255&#39;]] }}]
});
</code></pre></div></li>
<li><p>Connect window5 to window6 from center to center, 5px wide line that is green and half transparent. the Endpoints are 125px in radius and spill out from underneath their elements.
<pre>
jsPlumb.connect({
  source:&#39;window5&#39;,
  target:&#39;window6&#39;,
  anchors:[&quot;Center&quot;, &quot;Center&quot;],
  paintStyle:{strokeWidth:5,stroke:&#39;rgba(0,255,0,0.5)&#39;},
  endpointStyle:{radius:125}
});
</pre></p></li>
<li><p>Connect window4 to window5 from bottom right to top left, with a 7px straight line purple Connector, and an image as the endpoint,
placed on top of the element it is connected to.
<pre>
jsPlumb.connect({
source:&quot;window4&quot;,
target:&quot;window5&quot;,
anchors:[ &quot;BottomRight&quot;,&quot;TopLeft&quot; ],
paintStyle:{ strokeWidth:7, stroke:&quot;rgb(131,8,135)&quot; },
endpoint:[ &quot;Image&quot;, { src:&quot;http://morrisonpitt.com/jsPlumb/img/endpointTest1.png&quot; } ],
connector:&quot;Straight&quot;
});
</pre></p></li>
<li><p>Connect window5 to window6 between their center points with a semi-opaque connector, and 125px endpoints:
<pre>
jsPlumb.connect({
  source:&quot;window5&quot;,
  target:&quot;window6&quot;,
  anchors:[ &quot;Center&quot;, &quot;Center&quot; ],
  paintStyle:{ strokeWidth:5, stroke:&quot;rgba(0,255,0,0.5)&quot; },
  endpointStyle:{ radius:125 }
});
</pre></p></li>
<li><p>Connect window7 to window8 with a 10 pixel wide blue Connector, anchored on the top left of window7 and the bottom right of window8:
<pre>
jsPlumb.connect({
  source:&quot;window7&quot;,
  target:&quot;window8&quot;,
  paintStyle:{ strokeWidth:10, stroke:&quot;blue&quot; },
  anchors:[ &quot;TopLeft&quot;, &quot;BottomRight&quot; ]
});
</pre></p></li>
<li><p>Connect the bottom right corner of window4 to the top left corner of window5, with rectangular Endpoints of size 40x40 and a hover color of light blue:
<pre>
jsPlumb.connect({
  source:&quot;window4&quot;,
  target:&quot;window5&quot;,
  anchors:[&quot;BottomRight&quot;,&quot;TopLeft&quot;],
  paintStyle:{strokeWidth:7,stroke:&#39;rgb(131,8,135)&#39;},
  hoverPaintStyle:{ stroke:&quot;rgb(0, 0, 135)&quot; },
  endpointStyle:{ width:40, height:40 },
  endpoint:&quot;Rectangle&quot;,
  connector:&quot;Straight&quot;
});
</pre></p></li>
<li><p>Connect window1 to window2 with the default paint settings but provide some drag options (which are passed through to the underlying library&#39;s draggable call):
<pre>
jsPlumb.connect({
  source:&#39;window1&#39;, 
  target:&#39;window2&#39;,
  dragOptions:{
    cursor:&#39;crosshair&#39;
  }
});
</pre></p></li>
</ul>

                </div>
            </div>
        </div>

        <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-49979015-1', 'auto');
    ga('send', 'pageview');

</script>


    </body>
</html>
